<template>
  <!-- 店铺经营游戏配置 -->
  <div class="app-container" v-loading="loading">
    <el-form class="search-form-new" :model="queryParams" ref="queryForm" :inline="true" label-width="68px" >
      <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
        <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
          <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
        </el-select>
      </el-form-item>
      <el-form-item class="btns">
        <el-button v-hasPermi="['searchTenantID']" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
        <el-button icon="el-icon-plus" type="primary" @click="addACount">新增</el-button>
      </el-form-item>
    </el-form>
    <div class="table_box">
      <el-table :data="tableData" stripe >
        <el-table-column label="名称" prop="name" />
        
        <el-table-column label="图标" prop="icon">
          <template slot-scope="scope">
            <img style="height:32px" :src="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column label="竞价回收状态" prop="sort" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isBack == 1" type="success">启用</el-tag>
            <el-tag v-else type="warning">禁用</el-tag>
            <!-- <el-switch @change="workStateChange(scope.row)" v-model="scope.row.isBack" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="2" ></el-switch> -->
          </template>
        </el-table-column>

        <el-table-column label="排序" prop="sort" />
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="edit" icon="el-icon-edit" @click="editItem(scope.row)">编辑</el-button>
            <el-button type="del" icon="el-icon-delete" @click="delItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 一下是弹出框 -->
    <addDialog ref="addDialog" :yiTianjia="tableData"></addDialog>
  </div>
</template>

<script>
import gameSettingApi from '@/api/tenantApis/gameSetting'
import addDialog from "./addEditDialog.vue";
export default {
  name: "",
  components: { addDialog },
  data() {
    return {
      loading: false,
      config: [],
      upLoadUrl: "",
      loading: false,
      user: {},
      queryParams: {
        tenantId: "",
      },
      isBack: 1,
      tableData:[]
    };
  },
  computed: {
    tenantList() {
      let arr = JSON.parse(JSON.stringify(this.$store.getters.tenantList));
      return arr;
    },
  },
  created() {
   this.getList()
  },
  methods: {
    // 新增
    addACount() {
      this.$refs.addDialog.open("add");
    },
    // 编辑
    editItem(row) {
      // 查看详情
      this.$refs.addDialog.open("edit", row);
    },
    // 获取列表
    getList(){
      gameSettingApi.getGamelist().then(res=>{
        this.tableData = res.rows
      })
    },
    workStateChange(row) {
      const originalRenewal = row.isBack == 2 ? 1 : 2;
        let statues = row.isBack == 2 ? '关闭' : '开启'
      this.$confirm(`确定要${statues} 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await gameSettingApi.editGame({ gameId: row.id, renewal: row.isBack })
        this.$message.success('操作成功')
        this.getList()
      }).catch(() => {
        row.isBack = originalRenewal;
      })
    },
    // 删除记录
    delItem(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          gameSettingApi.delGame(row.tenantGameInfoId).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
